<template>
  <div>
    <h1>是的长头发v应该不会你信任的长头发v有</h1>
    <div>
      <div class="header flex">
        <span>信息</span>
        <!-- <el-select class="input" v-model="sex" placeholder="考生性别">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
        <el-input class="input" clearable v-model="nee" placeholder="考生姓名"></el-input>
        <el-button @click="search({ nee })"
          >查询</el-button >
          <el-button @click="clear()"
          >重置</el-button >
        <!-- 弹框  新增-->
        <el-popover placement="top" width="560" v-model="visible">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
            <el-form-item label="员工ID" prop="yId">
                <el-input v-model="ruleForm.yId"></el-input>
              </el-form-item>
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
              <!-- 学历 -->
              <el-form-item label="所属部门" prop="cart">
                <el-input v-model="ruleForm.cart"></el-input>
              </el-form-item>
              <el-form-item label="学历" prop="teet">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>

              <el-form-item label="员工类型" prop="nee">
                <el-radio-group v-model="ruleForm.nee">
                  <el-radio v-model="ruleForm.nee" label="普工员工"></el-radio>
                  <el-radio v-model="ruleForm.nee" label="经理"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="visible = false"
              >确定</el-button
            >
          </div>
          <!-- 新增按钮 -->
          <el-button type="primary" slot="reference" >新增</el-button>
        </el-popover>


      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- 点击按钮 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- 需求人数 -->
        <el-table-column label="员工工号" width="120">
          <template slot-scope="scope">{{ scope.row.yId }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="员工姓名"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="员工手机"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="所属部门" width="120">
          <template slot-scope="scope">{{ scope.row.cart }}</template>
        </el-table-column>
        <el-table-column
          prop="teet"
          label="学历"
          width="120"
        ></el-table-column>
        <el-table-column prop="age" label="年龄" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="入职日期" width="120">
          <template slot-scope="scope">{{ scope.row.time }}</template>
        </el-table-column>
        <el-table-column prop="nee" label="员工类型" width="120">
        </el-table-column>
        <el-table-column prop="times" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column  width="120" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">

              <el-button type="text" size="small">编辑</el-button>

          <!-- <el-button type="text" size="small" @click="remove(scope.row.ID)" >删除</el-button> -->
          <el-button type="text" size="small" @click="remove(scope.$index, tableData)" >删除</el-button>

              <el-button type="text" size="small">审核</el-button>
            </template>
        </el-table-column>

      </el-table>
    </div>
    <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
  </div>
</template>

<script>
import { staffAPI } from "@/api/staffInfo.js";
export default {
  data() {
    return {
      nee:'',
      ruleForm: {
        yId:'',
        name: "王五",
        phone: "17861717171",
        teet:'大专',
        cart: "前端",
        age: "20",
        nee:['普通员工','经理'],
       time:'2022.12.12',
       times:'2022.12.12.1.49',

      },
      options: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      total: 0, // 列表总行数
      pageSize: 10,
      currentPage: 1,
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      visible: false,
      tableData: [],
      dataList:[],
      multipleSelection: [],
    };
  },
  created() {
    this.needs();

  },
  components: {
    Pagin: () => import("c/Pagin"),
  },
  mounted() {},
  methods: {
    // 删除
    remove (index, rows) {
      rows.splice(index, 1);
    },
    // 添加成功
    submitForm(form) {
      console.log(form);
      //请求成功后
      var newObj = {
        yId: form.yId,
        name : form.name,
        phone : form.phone,
        teet : form.teet,
        cart : form.cart,
        age : form.age,
        nee : form.nee,
        time : form.time,
        times : form.times

      }
      console.log(newObj);
      this.dataList.unshift(newObj)
      console.log(this.dataList.length);
      this.fetchData(this.currentPage)
      this.total = this.dataList.length
      this.$message.success('添加成功')
      //关闭
      this.visible = false
    },
    async needs() {
      var res = await staffAPI();

      console.log(this.tableData);
      this.dataList = res.data
       this.total = this.dataList.length
       this.fetchData(this.currentPage)
    },
     //分页
     fetchData (count) {
      var list = this.dataList
      var from = (count - 1) * this.pageSize
      const to = count * this.pageSize
      this.tableData = []
      for (var from = 0; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from])
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    clear () {
      this.nee = ''
      // this.sex = ''
      // this.ID = ''
      // this.type = ''
      // this.num = ''
    }
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 120px;
}
.header {
  width: 40%;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
</style>
